<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VIP充值</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/vipopen.css">
</head>

<body>
  <!-- 开通VIP -->
  <div class="vip_box">
    <!-- 头部标题 -->
    <div class="vip_header">
      <img src="./images/vip_pic.webp" alt="">
      <span>豪华绿钻</span>
      <input type="checkbox" name="head" id="head">&nbsp;&nbsp;
      <label class="head" for="head"></label>
      同意<a href="#">《服务条款》</a>
      <i>x</i>
    </div>
    <!-- VIP充值类型 -->
    <div class="vip_type">
      <h3>开通账号： <span>巴黎铁塔下的纸飞机</span>(QQ昵称)</h3>
      <div class="vip_type_money">
        <!-- 充值类型 -->
        <div class="money_item type1 active">
          <div class="spec">
            <p><span>45</span>元</p>
            <p>15元/月</p>
          </div>
          <p>3个月</p>
          <i class="active"></i>
        </div>
        <div class="money_item type2">
          <div class="spec">
            <p><span>90</span>元</p>
            <p>15元/月</p>
          </div>
          <p>6个月</p>
          <i></i>
        </div>
        <div class="money_item type3">
          <div class="spec">
            <p><span>168</span>元</p>
            <p>14元/月</p>
          </div>
          <p>12个月</p>
          <i></i>
        </div>
        <div class="money_item type4">
          <div class="spec">
            <p><span>15</span>元</p>
            <p>15元/月</p>
          </div>
          <div class="custom">
            <div class="btn_sub">
              <span class="btn_img"></span>
            </div>
            <div class="month"><span>1</span>个月</div>
            <div class="btn_add">
              <div class="btn_img"></div>
            </div>
          </div>
          <i></i>
        </div>
      </div>
    </div>
    <!-- 支付方式 -->
    <div class="vip_pay">
      <h3>支付方式：</h3>
      <div class="vip_pay_type">
        <div class="paytype qqpay active">qq支付<i class="active"></i></div>
        <div class="paytype wxpay">微信支付<i></i></div>
      </div>
      <!-- 支付二维码 -->
      <div class="vip_pay_pic">
        <p><span>手机qq</span>扫码，支付<i>45</i>元</p>
        <div class="pay_img">
          <img src="./images/wx_erweima.jpg" alt="">
        </div>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="vip_content"></div>
  </div>
  <script src="./js/vipopen.js"></script>
</body>

</html>